<template>
    <div class="price-page">
        <NavBar />
        <div class="auth-page">
            <form @submit.prevent="handleRegister">
              <div class="form-group">
                <label for="email">邮箱</label>
                <input type="input" v-model="email" />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password"  v-model="password" />
              </div>
              <button type="submit" class="btn btn-primary">注册</button>
              <p class="switch-page">
                已有账号？<router-link to="/login">登录</router-link>
              </p>
            </form>
          </div>
     </div>   

</template>

<script>
import NavBar from '@/components/NavBar.vue';
import { registerApi } from '@/api/auth';
export default {
   components: {
    NavBar
  },
   data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async handleRegister() {
      if(!this.email){
        return this.$message.error('邮箱不能为空')
      }
      if(!this.password){
        return this.$message.error('密码不能为空')
      }
      const res = await registerApi(this.email, this.password)
      if(res.code != 200){
        return this.$message.error(res.msg)
      }
      this.$message.success('注册成功')
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
.price-page {
    background-color: #1e1e1e;
    color: #ffffff;
    min-height: 100vh;
  }
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1e1e1e;
    color: #ffffff;
}

h1 {
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  padding: 0.5rem;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #2a2a2a;
  color: #ffffff;
}

input:focus {
  border-color: #6478ff;
}

.switch-page {
  margin-top: 1rem;
}
</style> 